<!--
 * @Description: 监测月报
 * @Author: Ronda
 * @Date: 2022-02-16 09:30:08
 * @LastEditors: 奶龙不是龙 644538376@qq.com
 * @LastEditTime: 2025-09-26 11:26:57
-->
<template>
  <div>
    <el-col :span="4">
      <div class="tree">
        <el-input placeholder="输入关键字进行过滤" v-model="filterText" size="mini">
        </el-input>
        <el-tree @node-click="handlerClick" class="filter-tree" :data="treeData" :props="defaultProps"
           :filter-node-method="filterNode" ref="tree">
        </el-tree>
      </div>
    </el-col>

    <el-col :span="20">
      <div v-if='params.device_id' class="table">
        <el-form :inline="true">
          <el-form-item>
            <div class="block">
              <span class="demonstration"></span>
              <el-date-picker value-format="yyyy-MM" v-model="form.data" type="month" placeholder="选择月">
              </el-date-picker>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon='el-icon-search' @click="toSearch">搜索</el-button>
          </el-form-item>
          <el-form-item>
            <el-button @click="toDownload" type="primary" icon='el-icon-download'>下载</el-button>
          </el-form-item>
        </el-form>

        <!-- 表格 -->
        <el-table :data="monitorData" style="width: 100%">
          <el-table-column prop="d" label="日期" align="center">
              <!-- 时间过滤器 -->
              <template v-slot="scope">
                <div>
                  {{ scope.row.d | fmtDate }}
                </div>
              </template>
            </el-table-column>
          <el-table-column prop="tsp" label="tsp" width="180"></el-table-column>
          <el-table-column prop="pm10" label="pm10"></el-table-column>
          <el-table-column prop="pm25" label="pm2.5"></el-table-column>
          <el-table-column prop="temperature" label="温度"></el-table-column>
          <el-table-column prop="humidity" label="湿度"></el-table-column>
          <el-table-column prop="wind_direction" label="风向"></el-table-column>
          <el-table-column prop="wind_speed" label="风速"></el-table-column>
        </el-table>

        <!-- 分页组件（已调整位置） -->
        <div class="page" style="margin-top: 10px;">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="params.page" :page-sizes="[5, 8, 10, 20]" :page-size="params.pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="total">
          </el-pagination>
        </div>
      </div>
      <div v-else style="line-height: 50px;font-size: 20px;text-align: center;">请点击设备查看数据</div>
    </el-col>
  </div>
</template>

<script>
import { get } from '@/utils/request';
export default {
  data() {
    return {
      filterText: '',
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      monitorData: [],
      params: {
        page: 1,
        pageSize: 100,
        device_id: 0,
        engineer_id: 0
      },
      form: { data: '' },
      total: 0
    }
  },
  watch: {
    filterText(val) {
      if (this.$refs.tree) {
        this.$refs.tree.filter(val);
      }
    }
  },
  methods: {
    toSearch() {
      this.params.page = 1;
      this.getMonitor();
    },
    handlerClick(val) {
      if (!val.children) {
        this.params.device_id = val.id;
        this.params.engineer_id = val.engineer_id || 0;
        this.params.page = 1;
        this.getMonitor();
      }
    },
    async getTreeData() {
      try {
        const res = await get('/engineer/findEngineerDeviceTree');
        this.treeData = res.data || [];
      } catch (err) {
        console.error('获取设备树失败:', err);
        this.treeData = [];
      }
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.name && data.name.indexOf(value) !== -1;
    },
    async getMonitor() {
      if (!this.params.device_id) return;

      const temp = {
        ...this.params,
        ...(this.form.data && { date: this.form.data })
      };

      try {
        const res = await get('/monitor/queryMouthData', temp);
        console.log(res,'333333');
        if (res.data && res.data.list) {
          this.monitorData = res.data.list;
          this.total = res.data.total || 0;
        } else if (Array.isArray(res.data)) {
          this.monitorData = res.data;
          this.total = res.data.length;
        } else {
          this.monitorData = [];
          this.total = 0;
        }
      } catch (err) {
        console.error('获取监测数据失败:', err);
        this.monitorData = [];
        this.total = 0;
      }
    },
    handleSizeChange(val) {
      this.params.pageSize = val;
      this.getMonitor();
    },
    handleCurrentChange(val) {
      this.params.page = val;
      this.getMonitor();
    },
    toDownload() {
      if (!this.params.device_id) {
        this.$message.warning('请先选择设备');
        return;
      }
      if (!this.form.data) {
        this.$message.warning('请选择下载的月份');
        return;
      }

      const downloadParams = {
        device_id: this.params.device_id,
        engineer_id: this.params.engineer_id,
        date: this.form.data
      };

      const queryStr = Object.keys(downloadParams)
        .map(key => `${key}=${encodeURIComponent(downloadParams[key])}`)
        .join('&');
      
      window.open(`/monitor/downloadMonthlyData?${queryStr}`, '_blank');
    }
  },
  created() {
    this.getTreeData();
  }
};
</script>

<style scoped>
.tree {
  height: calc(100vh - 60px);
  padding-right: 10px;
  border-right: 1px solid #ececec;
  padding-top: 10px;
}

.block {
  padding-left: 10px;
  padding-right: 20px;
}

/* 分页样式调整：向左微调20px（核心修改） */
.page {
  /* 原text-align: right改为left，并添加左侧间距控制位置 */
  text-align: left;
  margin-top: 10px;
  margin-left: 20px; /* 向左移动的距离，可根据需要调整 */
}
</style>
